<div class="panel animation-fade">
  <div class="panel-body">
    <div class="row">
      <!-- Tooltip  -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Tooltip   <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tooltip">ui.bootstrap.tooltip</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="TooltipDemoController">
                  <div class="form-group">
                      <label>Dynamic Tooltip Text</label>
                      <input type="text" ng-model="dynamicTooltipText" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Dynamic Tooltip Popup Text</label>
                      <input type="text" ng-model="dynamicTooltip" class="form-control">
                    </div>
                    <p>
                      Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
                      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
                      aliquam. Tincidunt lobortis feugiat vivamus at 
                      <a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
                      arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
                      <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a> 
                      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
                      <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a> 
                      pharetra convallis posuere morbi leo urna, 
                      <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
                      at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
                      <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
                    </p>

                    <p>
                      I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
                    </p>

                    <form role="form">
                      <div class="form-group">
                        <label>Or use custom triggers, like focus: </label>
                        <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
                      </div>
                      <div class="form-group" ng-class="{'has-error' : !inputModel}">
                        <label>Disable tooltips conditionally:</label>
                        <input type="text" ng-model="inputModel" class="form-control"
                          placeholder="Hover over this for a tooltip until this is filled"
                          tooltip="Enter something in this input field to disable this tooltip"
                          tooltip-placement="top"
                          tooltip-trigger="mouseenter"
                          tooltip-enable="!inputModel" />
                      </div>
                    </form>
                </div>

                <div class="col-md-6">
                  <p>A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.</p>

                  <p>There are two versions of the tooltip: <code>tooltip</code> and <code>tooltip-html-unsafe</code>. The former takes text only and will escape any HTML provided. The latter takes whatever HTML is provided and displays it in a tooltip; it called "unsafe" because the HTML is not sanitized. <em>The user is responsible for ensuring the content is safe to put into the DOM!</em></p>

                  <p>The tooltip directives provide several optional attributes to control how they will display:</p>

                  <ul>
                    <li><code>tooltip-placement</code>: Where to place it? Defaults to "top", but also accepts "bottom", "left", "right".</li>
                    <li><code>tooltip-animation</code>: Should it fade in and out? Defaults to "true".</li>
                    <li><code>tooltip-popup-delay</code>: For how long should the user have to have the mouse over the element before the tooltip shows (in milliseconds)? Defaults to 0.</li>
                    <li><code>tooltip-trigger</code>: What should trigger a show of the tooltip?</li>
                    <li><code>tooltip-append-to-body</code>: Should the tooltip be appended to <code>$body</code> instead of the parent element?</li>
                  </ul>

                  <p>The tooltip directives require the <code>$position</code> service.</p>

                  <p><strong>Triggers</strong></p>

                  <p>The following show triggers are supported out of the box, along with their provided hide triggers:</p>

                  <ul>
                    <li><code>mouseenter</code>: <code>mouseleave</code></li>
                    <li><code>click</code>: <code>click</code></li>
                    <li><code>focus</code>: <code>blur</code></li>
                  </ul>

                  <p>For any non-supported value, the trigger will be used to both show and hide the tooltip.</p>

                  <p><strong>$tooltipProvider</strong></p>

                  <p>Through the <code>$tooltipProvider</code>, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:</p>

                  <ul>
                    <li><code>setTriggers( obj )</code>: Extends the default trigger mappings mentioned above with mappings of your own. E.g. <code>{ 'openTrigger': 'closeTrigger' }</code>.</li>
                    <li><p><code>options( obj )</code>: Provide a set of defaults for certain tooltip and popover attributes. Currently supports 'placement', 'animation', 'popupDelay', and <code>appendToBody</code>. Here are the defaults:</p>

                    <pre>
    placement: 'top',
    animation: true,
    popupDelay: 0,
    appendToBody: false
                    </pre>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Tooltip  -->
    </div>
  </div>
</div>
